<template>
  <div class="recommendation-panel">
    <!-- 本周热搜 -->
    <MyDialog :data="hotSearches">
      <template v-slot:title> 本周热搜 TOP5 </template>
      <template v-slot:content>
        <ul>
          <li v-for="(item, index) in hotSearches" :key="index">
            <span>#{{ item.topic }}</span>
            <div class="heat">
              <span class="iconfont icon-remen"></span>
              <span>{{ item.heat }}</span>
            </div>
          </li>
        </ul>
      </template>
    </MyDialog>

    <MyDialog :data="hotSearches">
      <template v-slot:title> 可能感兴趣的人 </template>
      <template v-slot:right>
        <button>
          <span class="iconfont icon-update"></span>
          换一批
        </button>
      </template>
      <template v-slot:content>
        <ul>
          <li v-for="(person, index) in people" :key="index">
            <div class="person-info">
              <span class="name"
                >{{ person.name }}
                <span class="age">♂{{ person.age }}岁</span></span
              >
              <p>研究领域：{{ person.field }}</p>
              <p>{{ person.institution }} · {{ person.position }}</p>
            </div>
            <button class="btn-follow">+ 关注</button>
          </li>
        </ul>
      </template>
    </MyDialog>


  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";

export default {
  components: {
    MyDialog,
  },
  data() {
    return {
      hotSearches: [
        { topic: "区块链", heat: 96 },
        { topic: "数据挖掘", heat: 91 },
        { topic: "无人机", heat: 87 },
        { topic: "生命科学", heat: 72 },
        { topic: "传感器", heat: 60 },
      ],
      people: [
        {
          name: "李国盛",
          age: 52,
          field: "机电一体化技术",
          institution: "哈尔滨工业大学",
          position: "教授",
        },
        {
          name: "陈颖",
          age: 36,
          field: "人工智能",
          institution: "清华大学",
          position: "副教授",
        },
      ],
    };
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.heat {
  display: flex;
  align-items: center;
}
/* 可能感兴趣的人样式 */
.recommendations {
  background-color: #e8f5fe;
  padding: 15px;
  border-radius: 8px;
}

.recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendations li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.person-info .name {
  font-weight: bold;
}

.age {
  color: #a0a0a0d6;
  font-size: 12px;
}

.btn-follow {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50px;
  height: 25px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
</style>
